.lightMusic {
  width: 100%;
  background-image: linear-gradient(200deg, #7f7280, #000000);
  position: absolute;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  // 悬浮歌词
  .MusicLyricFlont {
    position: absolute;
    left: 20px;
    top: 60vh;
    border-top: 1px solid rgba(150, 150, 150, 0.1);
    z-index: 9999;
    color: #ffffff;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;

    img {
      width: 5vw;
      height: 5vw;
      display: block;
      margin: 2vw auto;
    }
  }

  li {
    list-style: none;
  }

  .lightMusic_head {
    width: 100%;
    height: 6vh;
    margin-bottom: 0;
    display: flex;
    border-bottom: 1px solid rgba(150, 150, 150, .1);
    background: rgba(0, 0, 0, 0.12);
    overflow: auto;

    .lightMusic_head_li {
      width: 25%;
      height: 6vh;
      list-style: none;
      color: #C5C5C5;
      text-align: center;
      line-height: 6vh;
      border-bottom: 4px solid rgba(0, 0, 0, 0);
    }

    .lightMusicActive {
      border-bottom: 4px solid #ccc;
      box-shadow: border-box;
      color: #ffffff;
    }
  }

  .lightMusic_body {
    width: 100%;
    max-height: 85vh;
    background: rgba(0, 0, 0, 0.12);
    position: relative;

    .lightMusic_body_li {
      width: 100%;
      max-height: 85vh;
      z-index: 0;
      color: #ccc;
      position: absolute;
      top: 0;
      left: 0;

      // 搜索页面的所有样式
      .lightMusic_body_li_Search {
        width: 75vw;
        height: 35vw;
        background: #ffffff;
        border-radius: 5px;
        margin: 20vh auto;
        padding-top: 4vh;

        // 去掉样式里面的点击蓝色边框
        .ant-input:hover {
          border: 1px solid #d9d9d9;
          box-shadow: none;
        }

        .musicInput {
          width: 90%;
          display: block;
          margin: 0 auto;
        }

        >span {
          margin-left: 5vw;
          width: 90%;
          display: block;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap; //溢出不换行（一行内容）
        }

        .musicButton {
          width: 20vw;
          float: right;
          margin-right: 5vw;
          margin-top: 2vw;
          border-radius: 5px;
          display: block;
        }
      }

      // 收藏页
      .lightMusic_body_li_Playing {
        width: 100%;
        max-height: 76vh;
        padding: 0 20px 11vh 20px;
        overflow: auto;

        .lightMusic_Playing_list_Active {
          color: #ffffff;

          .lightMusic_list_num {
            background: url('../img/wave.gif') no-repeat;
            background-position: 0 5vw;
          }
        }

        .lightMusic_Playing {
          width: 100%;
          height: 8vh;
          display: flex;
          justify-content: space-between;
          line-height: 8vh;
          border-bottom: 1px solid rgba(150, 150, 150, .1);

          h3 {
            width: 40%;
            color: #C5C5C5;
            text-align: left;
          }
        }

        .lightMusic_Playing_list {
          width: 100%;
          height: 7vh;
          border-bottom: 1px solid rgba(150, 150, 150, .1);
          display: flex;
          line-height: 7vh;
          padding: 0 20px;
          position: relative;
          // 歌曲详情的布局

          .lightMusic_list_num {
            width: 7vw;
            display: block;
          }

          .lightMusic_music_name {
            width: 40vw;
            display: block;
            overflow: hidden;
          }

          .lightMusic_auth_name {
            width: 25vw;
            display: block;
            overflow: hidden;
          }

          .lightMusic_auth_name_push {
            width: 8vw;
            display: block;
          }

          .lightMusic_list-mobile-menu {
            width: 5vw;
            height: 5vw;
            display: block;
            background: url('../img/player.png') no-repeat;
            background-position: -30px -370px;
            position: absolute;
            right: 0;
            top: 4vw;
          }
        }

        // 推荐歌曲页面
        .lightMusic_body_recommend {
          width: 100%;
          max-height: 80vh;
          display: flex;
          flex-wrap: wrap;
          padding-top: 3vw;

          li {
            width: 33.3%;
            height: 18vh;

            img {
              width: 25vw;
              height: 25vw;
              margin: 0 auto;
              display: block;
            }

            p {
              text-align: center;
              margin: 0;
            }
          }
        }
      }

      // 内容部分
      .lightMusic_body_div {
        width: 45vw;
        height: 45vw;
        margin: 20px auto;
        border-radius: 5px;
        position: relative;

        // 播放页
        img {
          width: 45vw;
          height: 45vw;
        }

        .lightMusic_body_div_span {
          position: absolute;
          left: 5vw;
          top: 0;
          display: block;
          background: url('../img/album_cover_player.png') no-repeat;
          background-size: 100%;
          width: 45vw;
          height: 45vw;
        }

      }

      .lightMusic_body_body {
        width: 80vw;
        height: 45vh;
        margin: 20px auto;
        overflow: hidden;
        position: relative;
        padding: 8vw 0 0 0;

        li {
          text-align: center;
          color: #ccc;
          margin: 10px 0;
        }

        // 歌词高亮
        .lightMusic_body_body_h1 {
          color: #31c27c;
        }
      }
    }
  }

  .lightMusic_button {
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.12);
    display: flex;
    border-top: 1px solid rgba(150, 150, 150, .1);
    z-index: 999999;

    .lightMusic_button_kong {
      width: 34%;
      height: 60px;
      margin: 0 10px;
      position: relative;

      .player-btn {
        background-image: url('../img/player.png');
        opacity: 0.8;
        display: inline-block;
        position: absolute;
        top: 50%;
      }

      .btn-prev {
        background-position: 0 -30px;
        width: 19px;
        height: 20px;
        margin-top: -10px;
      }

      .btn-play {
        width: 19px;
        height: 29px;
        margin-top: -14.5px;
        left: 36%;
        margin-left: -10.5px;
      }

      // 循环播放
      .btn-state-paused {
        background-position: -30px 0 !important;
      }

      // 单曲循环
      .btn-order-single {
        background-position: 0 -196px !important;
      }

      // 随机播放
      .btn-order-random {
        background-position: 0 -62px !important;
        height: 18px !important;
      }

      .btn-next {
        background-position: 0 -52px;
        right: 30%;
        width: 19px;
        height: 20px;
        margin-top: -10px;
      }

      .btn-order {
        background-position: 0 -173px;
        background-size: 450%;
        right: 0;
        width: 25px;
        height: 25px;
        margin-top: -10px;
      }
    }

    .lightMusic_button_speed {
      width: 60vw;
      height: 14vw;
      padding: 8vw 10px 0 0;
      position: relative;

      .lightMusic_button_mkpgb {
        width: 95%;
        background: #6e6e6e;
        height: 1vw;
        position: absolute;

        .lightMusic_button_mkpgb_span {
          width: 10px;
          height: 10px;
          position: absolute;
          display: block;
          background-image: url('../img/player.png');
          background-position: 0 -170px;
          border-radius: 50%;
          top: -4px;
          transform: scale(1.5);
        }
      }
    }
  }
}

.custom-LightMusic {

  .ant-message-notice-content {
    background: rgb(27, 27, 27);
    color: #C5C5C5;
  }

  .anticon-check-circle {
    display: none;
  }
}

// 歌曲下载的样式
.Music_download {
  width: 45vw;
  height: 14vh;
  margin: 0 auto;
  display: flex;

  .Music_download_left {
    width: 15vw;
    height: 14vh;
    color: #B2AFAF;
  }

  .Music_download_right {
    width: 30vw;
    height: 14vh;

    p {
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行（一行内容）

      span {
        margin-left: 5vw;
        background: #6e6e6e;
        color: #C5C5C5;
        border-radius: 4px;
      }
    }
  }
}

// 悬浮歌词的样式
.lightMusicModal {
  position: absolute;
  top: 300px;
  left: -80px;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
  max-width: 200vw;

  .ant-modal-body {
    padding-top: 6vw;
  }

  .lightMusic_body_body_div {
    height: 5vw;
    margin: 2vw 0;
    background: rgba(0, 0, 0, 0);
    white-space: nowrap;
  }

  .lightMusiclyrichandleCancel {
    width: 4vw;
    height: 30vw;
    position: absolute;
    right: 0;
    top: 25%;
    background: rgba(49, 194, 124, 0.2);
  }

  .lightMusic_body_body_h1 {
    color: #31c27c;
  }

  .ant-modal-content {
    background: rgba(127, 114, 128, 0.8) !important;
  }

  .lightMusicModalonTouchMove_span {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 14px;
    color: #ccc;
  }
}